<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Upload Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}"/>
    <style>
        .layui-upload-img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<!-- 模块名 -->
<div class="layui-main" style="width: 100%;">
    <div class="layui-row layui-col-space15" style="margin: 10px">
        <div class="layui-col-md6" style="border: 1px solid #cccccc">
            <div class="layui-panel">
                <div style="padding: 50px 30px;">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>拖拽上传</legend>
                    </fieldset>

                    <div class="layui-upload-drag" id="test10">
                        <i class="layui-icon"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                        <div class="layui-hide" id="uploadDemoView">
                            <hr>
                            <img src="" alt="上传成功后渲染" style="max-width: 196px">
                        </div>
                    </div>
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>绑定原始文件域</legend>
                    </fieldset>
                    <input type="file" name="file" id="test20">
                </div>
            </div>
        </div>
        <div class="layui-col-md6" style="border: 1px solid #cccccc">
            <div class="layui-panel">
                <div style="padding: 50px 30px;">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>文件列表</legend>
                    </fieldset>
                    <div>
                        <table id="fileTable" lay-filter="fileTableFilter"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="download">下载</a>
    <a class="layui-btn layui-btn-xs" lay-event="preview">预览</a>
</script>

<!--引入js文件-->
<script type="text/javascript" th:src="@{/plugins/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/javascript/jquery-2.1.4.js}"></script>
<script>
    var upload = null;
    var element = null;
    var layer = null;
    var table = null;

    $(() => {
        Layui.initLayui();
    })

    var Layui = {
        initLayui: () => {
            layui.use(['upload', 'layer', 'element', 'table'], function () {
                upload = layui.upload;
                element = layui.element;
                layer = layui.layer;
                table = layui.table

                //拖拽上传
                upload.render({
                    elem: '#test10'
                    , accept:'file'
                    , url: '/upload/uploadFile' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                    , done: function (res) {
                        if (res.data.flag === true) {
                            layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.data);
                            layer.msg('上传成功', {icon: 1}, () => {
                                table.reload('fileList')
                            });
                        } else {
                            layer.msg('上传失败', {icon: 5});
                        }
                    }
                });

                //绑定原始文件域
                upload.render({
                    elem: '#test20'
                    , accept:'file'
                    , url: '/upload/uploadFile' //此处配置你自己的上传接口即可
                    , done: function (res) {
                        if (res.data.flag === true) {
                            layer.msg('上传成功', {icon: 1}, () => {
                                table.reload('fileList')
                            });
                        } else {
                            layer.msg('上传失败', {icon: 5});
                        }
                    }
                });

                //监听行工具事件
                table.on('tool(fileTableFilter)', function (obj) {
                    var data = obj.data;
                    // 下载
                    if (obj.event === 'download') {
                        window.location.href = '/upload/downloadFile/?fileId=' + data.id;
                    }
                    // 预览
                    if (obj.event === 'preview') {
                        window.open('/upload/previewFile/?fileId=' + data.id);
                    }
                });

                Layui.queryFileData();
            })
        },
        /**
         * 加载文件上传列表
         */
        queryFileData: () => {
            table.render({
                id: 'fileList',
                elem: '#fileTable'
                , url: '/uploadFile/selectAll'
                , page: true
                , method: 'get'
                , defaultToolbar: []
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        //解析接口状态
                        "code": 0,
                        //解析提示文本
                        "msg": res.msg,
                        //解析数据长度
                        "count": res.data.total,
                        //解析数据列表
                        "data": res.data.records
                    };
                }
                , request: {
                    pageName: 'current' //页码的参数名称，默认：page
                    , limitName: 'size' //每页数据量的参数名，默认：limit
                }
                , cols: [
                    [
                        {field: 'number', type: 'numbers'}
                        , {field: 'checkbox', type: 'checkbox'}
                        , {field: 'fileName', title: '文件名', align: 'center'}
                        , {field: 'fileSize', title: '文件大小', align: 'center'}
                        , {field: 'filePath', title: '路径', align: 'center'}
                        , {field: 'createTime', title: '上传时间', align: 'center'}
                        , {title: '操作', toolbar: '#barDemo', align: 'center'}
                    ]
                ]
            });
        }
    }
</script>
</html>